<template>
  <div class="container">
    <div class="stack">
      <!-- 底层长方体 -->
      <div class="cuboid cuboid-1" :style="[cuboidStyle, { transform: stackPositions.cuboid1 }]">
        <div class="face front" :style="faceStyles.front">1</div>
        <div class="face back" :style="faceStyles.back"></div>
        <div class="face right" :style="faceStyles.right"></div>
        <div class="face left" :style="faceStyles.left"></div>
        <div class="face top" :style="faceStyles.top"></div>
        <div class="face bottom" :style="faceStyles.bottom"></div>
      </div>

      <!-- 中层长方体 -->
      <div class="cuboid cuboid-2" :style="[cuboidStyle, { transform: stackPositions.cuboid2 }]">
        <div class="face front" :style="faceStyles.front">2</div>
        <div class="face back" :style="faceStyles.back"></div>
        <div class="face right" :style="faceStyles.right"></div>
        <div class="face left" :style="faceStyles.left"></div>
        <div class="face top" :style="faceStyles.top"></div>
        <div class="face bottom" :style="faceStyles.bottom"></div>
      </div>

      <!-- 顶层长方体 -->
      <div class="cuboid cuboid-3" :style="[cuboidStyle, { transform: stackPositions.cuboid3 }]">
        <div class="face front" :style="faceStyles.front">3</div>
        <div class="face back" :style="faceStyles.back"></div>
        <div class="face right" :style="faceStyles.right"></div>
        <div class="face left" :style="faceStyles.left"></div>
        <div class="face top" :style="faceStyles.top"></div>
        <div class="face bottom" :style="faceStyles.bottom"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      cuboidConfig: {
        width: 50,
        height: 25
      }
    }
  },
  computed: {
    cuboidStyle() {
      return {
        width: `${this.cuboidConfig.width}px`,
        height: `${this.cuboidConfig.height}px`
      }
    },
    faceStyles() {
      const { width, height } = this.cuboidConfig
      const depth = height // 深度等于高度
      return {
        front: {
          width: `${width}px`,
          height: `${height}px`,
          transform: `translateZ(${depth/2}px)`
        },
        back: {
          width: `${width}px`,
          height: `${height}px`,
          transform: `translateZ(-${depth/2}px) rotateY(180deg)`
        },
        right: {
          width: `${depth}px`,
          height: `${height}px`,
          transform: `rotateY(90deg) translateZ(${width - depth/2}px)`
        },
        left: {
          width: `${depth}px`,
          height: `${height}px`,
          transform: `rotateY(-90deg) translateZ(${depth/2}px)`
        },
        top: {
          width: `${width}px`,
          height: `${depth}px`,
          transform: `rotateX(90deg) translateZ(${depth/2}px)`
        },
        bottom: {
          width: `${width}px`,
          height: `${depth}px`,
          transform: `rotateX(-90deg) translateZ(${depth/2}px)`
        }
      }
    },
    stackPositions() {
      const { height } = this.cuboidConfig
      const spacing = height + 20 // 长方体高度 + 间距
      return {
        cuboid1: 'translateY(0px)',
        cuboid2: `translateY(-${spacing}px)`,
        cuboid3: `translateY(-${spacing * 2}px)`
      }
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #f0f0f0;
  font-family: 'Arial', sans-serif;
  padding: 20px;
}

.control-group label {
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

.control-group input[type="range"] {
  width: 100%;
  margin: 5px 0;
}

.stack {
  position: relative;
  transform-style: preserve-3d;
  /* 调整俯视距离，让3D效果更明显 */
  transform: perspective(1000px) rotateX(-35deg) rotateY(0deg);
  transition: transform 0.3s ease;
}

.stack:hover {
  /* 悬停时增强俯视效果 */
  transform: perspective(1000px) rotateX(-45deg) rotateY(0deg);
}

.cuboid {
  position: absolute;
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  border: 2px solid #B8860B;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* 面的基础样式，尺寸和transform由JavaScript动态设置 */
.front {
  background: #FFD700;
}

.back {
  background: #DAA520;
}

.right {
  background: #B8860B;
}

.left {
  background: #B8860B;
}

.top {
  background: #FFA500;
}

.bottom {
  background: #CD853F;
}

/* 为不同层级的长方体设置不同颜色 */
.cuboid-1 .front { background: #FFD700; } /* 金黄色 */
.cuboid-1 .back { background: #DAA520; }
.cuboid-1 .right { background: #B8860B; }
.cuboid-1 .left { background: #B8860B; }
.cuboid-1 .top { background: #FFA500; }
.cuboid-1 .bottom { background: #CD853F; }

.cuboid-2 .front { background: #FF6B6B; } /* 红色系 */
.cuboid-2 .back { background: #E74C3C; }
.cuboid-2 .right { background: #C0392B; }
.cuboid-2 .left { background: #C0392B; }
.cuboid-2 .top { background: #FF8A80; }
.cuboid-2 .bottom { background: #A93226; }

.cuboid-3 .front { background: #4ECDC4; } /* 青色系 */
.cuboid-3 .back { background: #26A69A; }
.cuboid-3 .right { background: #00695C; }
.cuboid-3 .left { background: #00695C; }
.cuboid-3 .top { background: #80CBC4; }
.cuboid-3 .bottom { background: #004D40; }
</style>
